<template>
	<view>
		<!-- 导航栏 -->
		<navigation  title="酒店详情"></navigation>
		<view  style="position: relative;">
			<swiper class="swiper" @change="swiperChange" :indicator-dots="false" :circular="circular" :autoplay="autoplay"
			 :interval="interval" :duration="duration">
				<template v-for="(item, index) in swiperData.lbt">
					<swiper-item :key="index">
						<image :src="https+item"></image>
					</swiper-item>
				</template>
			</swiper>
			<view class="swiper_point">
				<text v-for="(item,index) in swiperData.lbt " :key="index" :class="current== index ? 'swiper_point_active' : 'swiper_point_noactive'"></text>
			</view>
		</view>
		<view class="hotelbox">
			<view class="hotelbox_name">
				<!-- <text v-if="options.type=='hall'">曼格纳({{swiperData.ho_names}})</text> -->				
				<text class=" ellipsis" style="margin: 0;padding-bottom: 0;" v-if="options.type=='hall'">{{swiperData.ho_money_max=="1"?swiperData.ho_names:'曼格纳'+'('+swiperData.ho_names+')'}}</text>
				<text class=" ellipsis" style="margin: 0;padding-bottom: 0;"  v-else>{{swiperData.ho_name}}</text>
				
				<!-- <text v-else>{{swiperData.ho_name}}</text> -->
				<text>{{swiperData.ho_drill==5?'五星级':'优选'}}</text>				
			</view>
			<view class="hotelbox_price">
				<text>￥{{swiperData.ho_money_min}}</text><text>/桌起</text>
			</view>
		</view>
		<view class="hotel_address">
			<image @click="getOpenAddress()" src="https://www.yusivip.com/upload/commonImg/address_icon.png" mode=""></image>
			<text @click="getOpenAddress()">{{dataDetail.hotel.ho_adddres}}</text>
			<image src="https://www.yusivip.com/upload/commonAppimg/appphone.png" @click="openPhone()" mode=""></image>
		</view>
		<view class="banquet_box">
			<view class="imgbox_title">
				<text>宴会厅</text>
				<view class="">
					<text style="font-size: 20px;">{{ballrIndex}}</text>
			        <text style="font-size: 14px;">/{{dataDetail.ballr.length}}</text>
				</view>
				
			</view>
			<swiper class="swiperbox" previous-margin="12.5px" next-margin="12.5px"  @change="ballrSwiper"  :indicator-dots="false" :circular="circular" 
			 :interval="2000" :duration="500">
				<template v-for="(item,inde) in  dataDetail.ballr">
					<swiper-item :key="inde">
						<view class="imgbox" @click="skipWeedingFn(item.ba_id)">
							<view class="imgbox_img">
								<image :src="https+item.ba_coverurl" mode=""></image>
							</view>
							<view class="imgbox_text">
								<view class="imgbox_text_name">
									{{item.ba_hall}}
								</view>
								<view class="imgbox_text_detail">
									<text>最大{{item.ba_table}}桌</text>
									<text>层高{{item.ba_floor}}m</text>
									<text>{{item.ba_pillar}}柱</text>
								</view>
							</view>
						</view>		
					</swiper-item>
				</template>
			</swiper>		
		</view>
		<view class="wedding">
			<view class="wedding_title" id="wedding_title">
				婚宴套餐（{{dataDetail.menu.length}}）
			</view>
			<view class="wedding_list" v-for="(item,index) in dataDetail.menu" :key="index" @click="cipcMenuFn(item.me_id)">
				<view class="wedding_name">
					{{item.me_name}}
				</view>
				<view class="wedding_price">
					<text>￥</text>
					<text>{{item.me_money}}</text>
					<text>/桌</text>
					<image src="https://www.yusivip.com/upload/commonImg/lefticon.png" mode=""></image>
				</view>
			</view>
		</view>
		
		
		
		
	</view>
</template>


<script>
	import navigation from '@/component/navigation.vue'
	
	const sun = require('../../../utils/sun.js')
	export default {
		components:{
		   navigation
		},
		data() {
			return {
			     isShow:false,//预约弹框
				https: 'https://www.yusivip.com/',
				current: 0, //轮播图点
				autoplay: true,
				interval: 2500,
				duration: 500,
				circular: true,
				
				dataDetail:'',//详情数据
				swiperData:"",//轮播图
				ballrIndex:'1',//宴会厅index
				options:'',
				getStatusBarHeight:'',
				shareObject:{
					href:'',
					title:'',
					desc:"",
					imgUrl:""
				},
				shareIcon:true,
			}
		},
		onLoad(options) {
			this.getStatusBarHeight=sun.getStatusBarHeight();
		
			this.options=options
			this.getIndex({'id':options.id})
		    
		},
		mounted() {
			this.$nextTick(function(){
				
			})	
			let _this=this
			setTimeout(()=>{
				if(this.options.type=='hall'){
					this.shareObject.href="pages/halls/halls?id="+this.options.id;
					this.shareObject.title=this.swiperData.ho_money_max=="1"?this.swiperData.ho_names:'曼格纳'+'('+this.swiperData.ho_names+')'
					this.shareObject.imgUrl=this.https+this.swiperData.lbt[0]
				}else{										 
					 _this.shareObject.href="pages/third-hotels/third-hotel?id="+this.options.id;
					 _this.shareObject.title=_this.swiperData.ho_name;
					 _this.shareObject.imgUrl=this.https+this.swiperData.lbt[0]
				}
			},500)
		},
		methods: {
			ballrSwiper(e){
				this.ballrIndex=e.detail.current+1
  			
			},
			//跳转到婚宴会馆
			skipWeedingFn(id){
				if(this.options.type){
					uni.navigateTo({
						url:`../weddingDetails/weddingDetails?ballrid=${id}&&id=${this.options.id}&&type=${this.options.type}`					
					})					
				}else{
					uni.navigateTo({
						url:`../weddingDetails/weddingDetails?ballrid=${id}&&id=${this.options.id}`					
					})				
				}
			},
			//跳转到菜单
			cipcMenuFn(id){
				uni.navigateTo({
				    url:"../meu/meu?id="+id					
				})
			},
			// 关闭预约弹框
			closeFn(){
				this.isShow=!this.isShow
			},
			//预约
			openyuyue(){
				this.isShow=!this.isShow
			},
			//打开客服
			kefuFn(){
				uni.navigateTo({
                    url:"../../privateLetter/index"					
				})
			},
			// 拨打电话
			openPhone(){
				uni.makePhoneCall({
				    phoneNumber: this.swiperData.ho_phone //仅为示例
				});
			},
			//定位
			// getOpenAddress(){
			// 	sun.getOpenAddress(this.dataDetail.hotel.ho_city+this.dataDetail.hotel.ho_area+this.dataDetail.hotel.ho_adddres)
			// },
			// 轮播索引
			swiperChange(e) {
				this.current = e.detail.current
			
			},
			//获取数据
			getIndex(e) {				
				let that = this
				sun.request({
					url: "mobile/Index/GetHotelAll",
					showLoading: true,
					data: {
						id:35
					},
					success(res) {
						let data = res
                         if(data.code==200){
							 that.dataDetail=data.data;
							 that.swiperData= that.dataDetail.hotel
						 }
					},
					fail(e) {
						uni.showToast({
							icon: "none",
							title: "服务器开小差去啦~",
						})
					}
				})
			
			},
		}
	}
</script>
<style lang="less">
/* 轮播 */
	.swiper {
		width: 100%;
		height: 400upx;
		
	}
	
	.swiper image {
		width: 100%;
		height: 100%;
	}
	
	.swiper_point {
		width: 100%;
		text-align: center;
		position: absolute;
		left: 0;
		bottom: 16upx;
	}
	
	.swiper_point text {
		display: inline-block;
		width: 50upx;
		height: 6upx;
		
		border-radius: 3upx;
		/* border-radius:2upx; */
	}
	
	.swiper_point_active {
		background-color: #ff4d4d;
	}
	.swiper_point_noactive {
		background-color: #656572;
		opacity: 0.2;
	}
	
	.swiperbackground {
		width: 100%;
		height: 24upx;
		position: absolute;
		left: 0;
		bottom: 10upx;
	}
	
	.swiperbackground image {
		width: 100%;
		height: 100%;
	
	}
    
	.hotelbox{
		padding: 50upx 40upx 32upx 40upx;
		text-align: left;
		border-bottom: 2upx solid #f4f4f4;
	}
	.hotelbox_name{
		margin-bottom: 32upx;
		height: 40upx;
		display: flex;
		justify-content: left;
		flex-wrap: wrap;
		align-items: center;
	}
	.hotelbox_name text:first-child{
		font-family: PingFang-SC-Medium;
		font-size: 42upx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 42upx;
		letter-spacing: 0upx;
		color: #010101;
		display: inline-block;
		width: 462rpx;
		/* height: 42rpx; */

		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		font-family: PingFang-SC-Medium;

	}
	.hotelbox_name text:last-child{
		    margin-left: 38upx;
		    display: inline-block;
			width: 108upx;
			height: 40upx;
			background-color:rgba(255,77,77,0.12 );
			border-radius: 10upx;
		    
			text-align: center;
			font-family: PingFang-SC-Medium;
			font-size: 25upx;
			font-weight: normal;
			font-stretch: normal;
			line-height: 40upx;
			color: #ff4d4d;
	}
	.hotelbox_price text:nth-child(1){
		    font-family: PingFang-SC-Medium;
			font-size: 44upx;
			font-weight: normal;
			letter-spacing: 0upx;
			color: #ff4d4d;
	}
	.hotelbox_price text:nth-child(2){
		    font-family: PingFang-SC-Bold;
			font-size: 28upx;
			font-weight: normal;
			letter-spacing: 0upx;
			color: #ff4d4d;
	}
	
	.hotel_address{
		padding: 39upx 40upx;
		border-bottom: 16upx solid #f4f4f4;
		display: flex;
		justify-content: left;
		align-items: center;
	}
	.hotel_address text{
		width: 380upx;
		font-family: PingFang-SC-Regular;
		font-size: 32upx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0upx;
		color: #27262e;
		opacity: 0.8;
		padding-left: 24upx;
		padding-right: 106upx;
		border-right: 1upx solid #c9c9c9;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}
	.hotel_address image:first-child{
		width: 28upx;
		height: 28upx;
		vertical-align: middle;
	}
	.hotel_address image:last-child{
		width: 40upx;
		height: 40upx;
		vertical-align: middle;
		margin: 0 76upx;
	}
	.imgbox{
		width: 100%;
		padding-bottom: 40upx;
	}
	.imgbox_img{
		width: 676upx;
		height: 384upx;
		background-color: #919095;
		/* opacity: 0.2; */
		border-radius: 10upx;
		margin: 0 auto;
	}
	.imgbox_img image{
		border-radius: 10upx;
		width: 100%;
		height: 100%;
	}
	.imgbox_text{
		padding-top: 32upx;
		padding-left: 40upx;
	}
    .banquet_box{
		width: 100%;
		padding:50upx 0upx ;
		box-sizing: border-box;
	}	
	.swiperbox{height:518upx;padding-bottom: 10upx;}
	.imgbox_title{
		text-align: left;
		font-family:PingFang-SC-Medium;
		font-size: 38upx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 42upx;
		letter-spacing: 0upx;
		color: #010101;
		padding-bottom: 40upx;
		padding-left: 40upx;
		padding-right: 40upx;
		display: flex;
		justify-content: space-between;
	}
	.imgbox_text_name{
		font-family: PingFang-SC-Medium;
		font-size: 32upx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0upx;
		color: #010101;
		padding-bottom: 24upx;
	}
	.imgbox_text_detail text:first-child{
		padding-left: 0;
	}
	.imgbox_text_detail text:last-child{
		border-right: 0upx;
	}
	.imgbox_text_detail{
		display: flex;
		justify-content: left;
		align-items: center;
	}
	.imgbox_text_detail text{
	
	
		font-family: PingFang-SC-Regular;
		font-size: 26upx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0upx;
		color: #010101;
		padding-right: 15upx;
		padding-left: 15upx;
		border-right: #CCCCCC solid 1upx;
	}
	.wedding{
		padding: 50upx 40upx;
		border-top: 1upx solid #CCCCCC;
	}
	.wedding_title{
		font-family: PingFang-SC-Medium;
		font-size: 38upx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 42upx;
		letter-spacing: 0upx;
		color: #010101;
		padding-bottom: 64upx;
	}
	.wedding_list{
		display: flex;
		justify-content: space-between;				
	}
	.wedding_name{
		font-family: PingFang-SC-Regular;
		font-size: 28upx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 42upx;
		letter-spacing: 0upx;
		color: #010101;
	}
	.wedding_price{
		display: flex;
		justify-content: right;
		align-items: center;
		margin-bottom: 62upx;
	}
	.wedding_price text:nth-child(1){
		    font-family: PingFang-SC-Medium;
			font-size: 24upx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 0upx;
			color: #ff4d4d;
	}
	.wedding_price text:nth-child(2){
		font-family: PingFang-SC-Medium;
			font-size: 34upx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 0upx;
			color: #ff4d4d;
	}
	.wedding_price text:nth-child(3){
		font-family: PingFang-SC-Medium;
			font-size: 28upx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 0upx;
			color: #ff4d4d;
	}
	.wedding_price image{
		width: 17upx;
		height: 17upx;
		margin-left: 30upx;
		/* background: #000000; */
		transform: rotate(180deg);
	}
	.footer{
		width: 100%;
		height: 99upx;
		display: flex;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		left: 0;
	}
	.footer .footer_left{
		width: 377upx;
		height: 99upx;
		background-color: #ffffff;
	}
	.footer .footer_right{
		width: 374upx;
		height: 99upx;
		background-image: linear-gradient(22deg, 
			rgba(255, 77, 77, 0.5) 0%, 
			rgba(255, 77, 77, 0.75) 0%, 
			#ff4d4d 0%, 
			#ff6e4d 100%), 
		linear-gradient(
			#fee3d2, 
			#fee3d2);
		background-blend-mode: normal, 
			normal;
		font-family: PingFang-SC-Medium;
		font-size: 32upx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 99upx;
		text-align: center;
		letter-spacing: 0upx;
		color: #ffffff;
	}
  .footer_left{
	  display: flex;
	  justify-content: space-around;
	  align-items: center;
  }
  .footer_left_main{
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;	
  
  }
  .footer_left_main text{
  font-family: PingFang-SC-Regular;
  	font-size: 22upx;
  	font-weight: normal;
  	font-stretch: normal;
  	letter-spacing: 0upx;
  	color: #27262e;
  	opacity: 0.8;
	}
  .footer_left_main image{
	  margin-bottom: 19upx;
	  width: 31upx;
	  height: 31upx;
	  /* background: #000000; */
  }
</style>
